<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		:root {
			font-size: 100px;
		}


		.parent {
			font-size: 16px;
		}

		.child1 {
			/* em单位 基于父元素的font-size来计算的 */
			font-size: 1em;
		}

		.child2 {
			/* rem单位 和父元素无关，是基于根元素字体大小来计算 */
			font-size: 0.16rem;
		}
	</style>
</head>

<body>
	<div class="parent">
		<div class='child1'>child1 使用的是 em 单位</div>
		<div class='child2'>child2 使用的是 rem 单位</div>
	</div>
</body>

</html>